<script setup>
import { User, Lock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

import { reactive, ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { login } from '@/api/login'
import Info from './register.vue'
import { useUserStore } from '@/stores/user'
// 路由
const router = useRouter() // ++++++
const route = useRoute()
const store=useUserStore()
// 表单数据
const formData = reactive({
  userName: 'admin',
  password: '123'
})
// 表单验证
const checkUname = (rule, value, callback) => {
  if (/^.{2,15}$/.test(value)) {
    callback()
  } else {
    callback(new Error('至少2~15个字符'))
  }
}
const formRules = reactive({
  userName: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    // { min: 2, max: 15, message: "至少2~15个字符", trigger: "blur" },
    { validator: checkUname, trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 2, max: 15, message: '至少2~15个字符', trigger: 'blur' }
  ]
})


// 表单提交
const formRef = ref()
const url = computed(() => {
  if (route.query.r) {
    return route.query.r
  } else {
    return '/'
  }
})
const onSubmit = () => {
  if (!formRef.value) return
  // formRef.value!.validate((isSuccess) => {
  formRef.value.validate(async (isSuccess) => {
    if (isSuccess) {
      // 1 请求接口
      let r=await login(formData)
        switch (r.code) {
          case 200:
            // changeAdminInfo(res.data)
            // router.replace(url.value)
            ElMessage.success('登录成功.')
            //记录当前的用户信息
            localStorage.setItem('token', r.data.token)
            localStorage.setItem('user', JSON.stringify(r.data.user))
            store.user=r.data.user
            //记录用户对应的角色
            store.role=r.data.role
            store.roleId=r.data.roleId
            store.deptName=r.data.deptName
            //记录用户的左菜单（动态菜单）
            store.leftMenus=r.data.menus
            //记录用户的权限
            store.selfPerms=r.data.pnames
            store.token=r.data.token
            router.push('/')
            break
          default:
            ElMessage.error('登录失败.')
            break
        }
      // // 2 判断 失败-弹框提示，成功-提示、存储、跳转
      // // console.log('表单数据.：', formData)
      // localStorage.setItem('info', JSON.stringify({ temp: 666 }))
      // ElMessage.success('登录成功')
      // router.push('/')
    }
  })
}
const infoRef = ref()
const register = () => {
  infoRef.value.state = true
}
</script>

<template>
  <Info ref="infoRef" />
  <div class="loginContainer">
    <div class="loginBox">
      <!-- 登录背景 -->
<!--      <div class="loginBg">-->
<!--        <img src="@/assets/loginBg.png" />-->
<!--      </div>-->
      <!-- 登录背景 -->

      <!-- 表单盒子 -->
      <div class="formBox">
        <!-- 标题 -->
        <div class="title">
          <img src="@/assets/系统图标2.png" />
          <span>考勤管理系统</span>
        </div>
        <!-- 标题 -->
        <!-- 账号登录 -->
        <el-form size="large" :model="formData" :rules="formRules" ref="formRef">
          <el-form-item prop="userName">
            <el-input
              placeholder="请输入用户名"
              v-model="formData.userName"
              :prefix-icon="User"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              placeholder="请输入密码"
              v-model="formData.password"
              :prefix-icon="Lock"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item>
          <label class="el-checkbox is-checked" style="margin: 0px 0px 25px"
            ><span class="el-checkbox__input is-checked"
              ><span class="el-checkbox__inner"></span
              ><input
                type="checkbox"
                aria-hidden="false"
                class="el-checkbox__original"
                value="" /></span
            ><span class="el-checkbox__label">记住密码<!----></span></label
          >
          <label class="el-checkbox is-checked" style="margin: 0px 0px 25px">
            <span class="el-checkbox__label" @click="register" style='margin-left: 250px;color: #1492ff'>注册</span>
          </label>
        </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">登录</el-button>
          </el-form-item>
        </el-form>
        <!-- 账号登录 -->
      </div>
      <!-- 表单盒子 -->
    </div>
  </div>
</template>

<style lang="scss" scoped>
.loginContainer {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #f0f2f5;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 25px;
  box-sizing: border-box;

  .loginBox {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 8px;
    position: relative;

    .skin {
      position: absolute;
      right: 20px;
      top: 20px;
    }

    .loginBg {
      width: 50%;
      height: 100%;
      img {
        width: 100%;
        max-width: 900px;
      }
    }

    .formBox {
      width: 50%;
      max-width: 500px;
      padding: 40px;
      border-radius: 10px;
      box-shadow: 0 2px 12px #0000001a;
      box-sizing: border-box;
      position: relative;
      .tips {
        width: 150px;
        height: 40px;
        border-radius: 8px;
        box-shadow: 0 2px 12px #0000001a;
        position: absolute;
        top: -60px;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #1492ff;
        font-size: 16px;
        &::after {
          content: '';
          box-sizing: border-box;
          width: 10px;
          height: 26px;
          border-top: 13px solid #fff;
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
          border-bottom: 13px solid transparent;
          position: absolute;
          top: 40px;
          right: 16px;
        }
      }
      .qrcodeBtn {
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer;
        width: 30px;
      }
      .qrcodeBox {
        text-align: center;
      }
      // title
      .title {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
        img {
          width: 40px;
          height: 30px;
        }
        span {
          margin-left: 10px;
          font-size: 30px;
          font-weight: bold;
        }
      }
      .el-form {
        max-width: 350px;
        margin: auto;
        .el-button,
        .el-input {
          width: 100%;
        }
      }
    }
  }
}

@media (max-width: 1200px) {
  .loginContainer .loginBox .loginBg img {
    margin-top: 100px;
  }
}
@media (max-width: 920px) {
  .loginBg {
    display: none;
  }
  .loginContainer {
    padding: 10px;

    .formBox {
      width: 95% !important;
      padding: 30px;
      .title {
        display: flex;
        align-items: center;
        justify-content: center;

        margin-bottom: 15px;
        img {
          width: 53px;
          height: 44px;
        }
        h1 {
          font-size: 30px !important;
        }
      }
    }
  }
}
</style>
